<template>
	<view class='bg-gray' style="height: 100vh;overflow: hidden">
		<div class="page-header" style="height:110px;z-index: 2;">
			<div class="title-header">
				<div class="-goback" @click="goHome()">&nbsp;</div>
				<div class="-title">借阅记录</div>
			</div>
		</div>
		
		<div class="-body">
			<div class="-tab">
				<template v-if="tabActive===0">
					<div class="item active">全部</div>
					<div class="item" @click="tabActive=1">已借阅</div>
					<div class="item" @click="tabActive=2">已归还</div>
				</template>
				<template v-else-if="tabActive===1">
					<div class="item" @click="tabActive=0">全部</div>
					<div class="item active">已借阅</div>
					<div class="item" @click="tabActive=2">已归还</div>
				</template>
				<template v-else-if="tabActive===2">
					<div class="item" @click="tabActive=0">全部</div>
					<div class="item" @click="tabActive=1">已借阅</div>
					<div class="item active">已归还</div>
				</template>
			</div>
			
			<scroll-view scroll-y @scrolltolower="handleScrollToLower" style="height:calc(100% - 40px);">
				<div class='bg-gray' style="height:calc(100% - 20px);padding:10px 0;">
					<template v-if="list[tabActive].length<1">
						<view style="text-align: center;margin:20px 0;color:gray">暂无数据</view>
					</template>
					<template v-for="(item,index) in list[tabActive]" :key="item.id">
						<div class="-item">
							<div class="cover">
								<div class="bg-image"
									:style="'height:100%;width:100%;background-image:url(\''+item.cover+'\');'"></div>
							</div>
							<div class="detail">
								<div class="text-bold ellipsis">{{item.title}}</div>
								<div class="d-flex a-center mt-5 text-dark">
									<div
										:class="item.status_name.indexOf('已')>=0?'text-small -chip -success':'text-small -chip -danger'">
										{{item.status_name}}</div>
									<div class="text-small -chip">{{item.book_chamber_name}}</div>
								</div>
								<div class="text-small mt-5 text-dark">借出时间：{{item.lend_time}}</div>
								<div v-if="item.return_time!==''" class="text-small mt-5 text-dark">归还时间：{{item.return_time}}</div>
							</div>
						</div>
					</template>
				</div>
			</scroll-view>
		</div>
	</view>
</template>

<script>
	import com from '../common/index.js'
	export default {
		data() {
			return {
				mpTitle:com.mpTitle,
				tabActive: 0,
				list: [
					[],
					[],
					[]
				], // 数据列表
				page: [1, 1, 1], // 当前页码
				limit: 10 //[10,10,10], // 每页数量
			}
		},
		methods: {
			goHome() {
				uni.navigateBack()
				// uni.navigateTo({
				// 	url: "/pages/homepage"
				// })
			},
			getData(i = null) {
				const that = this
				let url
				// if(i){
				// 	this.tabActive=i
				// }
				if (i === 0) {
					//全部借还
					url = `/miniapi/member/borrow-all-log?first=${this.page[i]}&limit=${this.limit}`
				}
				if (i === 1) {
					//已借阅
					url = `/miniapi/member/borrow-out-log?first=${this.page[i]}&limit=${this.limit}`
				}
				if (i === 2) {
					//已归还
					url = `/miniapi/member/borrow-return-log?first=${this.page[i]}&limit=${this.limit}`
				}
				console.log('url:', url)
				com.poster(url, {}, 'GET', (e) => {
					//console.log(e)
					if (e.code === 200) {
						that.list[i] = that.list[i].concat(e.data.list)
						if (e.data.list.length > 0) that.page[i] += 1; // 页码加一
					} else {
						uni.showToast({
							title: e.msg,
							icon:'error',
						})
						setTimeout(()=>{
							com.go('userhome')
						},2000)
					}
				}, (e) => {
					that.goHome()
				})
			},
			handleScrollToLower() {
				this.getData();
			}
		},
		onLoad(opts) {
			this.getData(2)
			this.getData(1)
			this.getData(0)
		}
	}
</script>

<style>
	.-success {
		color: #03db6b !important;
	}

	.-danger {
		color: orangered !important;
	}
	
	
	.-body {
		/* height: calc(100vh - 150px); */
		margin-top: 140px;
		position: absolute;
		width: 100%;
		background: transparent;
		z-index: 10;
		height: calc(100vh - 140px);
	}
</style>